<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2d转换</title>
    <style>
        .transform {
            text-align: center;
            padding: 20px;
            line-height: 100px;
            margin-top: 50px;
            width:200px;
            height:100px;
            background-color:yellow;
            /*
            功能:
                元素顺时针旋转30度。
            说明:
                1. 以deg为单位的表示旋转角度.
                    - 负值是允许的，这样是元素逆时针旋转。
            */
            transform:rotate(30deg);
            -ms-transform:rotate(30deg); /* 兼容IE 9 */
            -webkit-transform:rotate(30deg); /* 兼容Safari and Chrome */
        }

        .transform-xy-1 {
            width:100px;
            height:75px;
            background-color:red;
            border:1px solid black;
        }

        .transform-xy-2 {
            width:100px;
            height:75px;
            background-color:red;
            border:1px solid black;
        }

        #div2 {
            transform:translate(50px,100px);
            -ms-transform:translate(50px,100px); /* IE 9 */
            /*
            功能:
                translate值（50px，100px）是从左边元素向右移动50个像素，并从顶部向下移动100像素。
            */
            -webkit-transform:translate(50px,100px); /* Safari and Chrome */
        }

        .scale-1 {
            margin: 150px;
            width: 200px;
            height: 100px;
            background-color: yellow;
            border: 1px solid black;
        }

        .scale-2 {
            /*
            功能:
                div 元素的宽度是原始大小的两倍，高度是原始大小的两倍
            */
            -ms-transform: scale(2,2); /* IE 9 */
            -webkit-transform: scale(2,2); /* Safari */
            transform: scale(2,2); /* 标准语法 */
        }
    </style>
</head>
<body>
<div class="transform">Hello11111</div>
<div class="transform-xy-1">Hello11111</div>
<div id="div2" class="transform-xy-2">Hello11111</div>
<span>transform属性好像会变成绝对位置</span>
<span>transform属性好像会变成绝对位置</span>
<span>transform属性好像会变成绝对位置</span>

<div class="scale-1"></div>
<div class="scale-1 scale-2"></div>
</body>
</html>